<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table table-bordered thead th {
            text-align: center;
        }
        input {
            autocomplete: off;
        }

    </style>
</head>
<body>
<div class="page-wrapper">
    {% include 'menu.html' %}
    <main class="page-content">

        <table class="table table-bordered" style="width:70%;margin-left: 20%">
            <h3 style="margin-left: 40%">当前已存在的项目 <a href="#" onclick="add_duan()"><span
                    style="font-size: small">新增端</span></a></h3>
            <br><br>
            <thead>
            <tr>
                <th>项目名</th>
                <th>项目地址</th>
                <th style="width: 170px">监控间隔时间(min)</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for i in duans %}
                <tr>
                    <td id="duan_id" style="display: none">{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td>{{ i.monitor_host }}</td>
                    <td>{{ i.monitor_time }}</td>
                    <td>
                        <a href="">
                            <button class="btn btn-success">进入</button>
                        </a>
                        <a href="#">
                            <button onclick="edit_duan('{{ i.id }}')" class="btn btn-default">编辑</button>
                        </a>
{#                        <a href="/del_duan/{{ i.id }}/"><button class="btn btn-danger">删除</button></a>#}
                        <button class="btn btn-danger" onclick="del_duan('{{ i.id }}')">删除</button>
                    </td>
                </tr>
            {% endfor %}


            {#                    <tr>#}
            {#                        <td>{{  }}</td>#}
            {#                        <td>10/11/2013</td>#}
            {#                        <td>发货中</td>#}
            {#                    </tr>#}
            {#                    <tr>#}
            {#                        <td>产品3</td>#}
            {#                        <td>20/10/2013</td>#}
            {#                        <td>待确认</td>#}
            {#                    </tr>#}
            {#                    <tr>#}
            {#                        <td>产品4</td>#}
            {#                        <td>20/10/2013</td>#}
            {#                        <td>已退货</td>#}
            {#                    </tr>#}
            </tbody>
        </table>

    </main><!-- page-content" -->
</div>

<div id="add_duan_div" style="display: none;position: absolute ;background-color:white;padding:10px;top: 120px;width: 30%;margin-left: 35%;
border: 1px solid black;z-index: 999;box-shadow: 4px 4px 6px gray">

    <form style="text-align: center" role="form" id="duan_form" method="post" action="/add_duan/">

{#        <div class="form-group">#}
{#            <label for="exampleInputEmail1">项目名</label><input type="text" name="" placeholder="项目名" class="form-control"/>#}
{#        </div>#}
{#        <div class="form-group">#}
{#            <label for="exampleInputPassword1">监控地址</label><input type="text" placeholder="监控地址" class="form-control" id=""/>#}
{#        </div>#}


        <h4 style="text-align: left">新增项目：</h4>
        <input name="div_id" id="add_div_id" type="text" style="display: none" value="">
        <div class="input-group">
            <span class="input-group-addon">项目名</span>
            <input type="text" name="name" class="form-control" placeholder="项目名" >
        </div>
        <div class="input-group">
            <span class="input-group-addon">监控地址</span>
            <input type="text"  name="monitor_host" class="form-control" placeholder="监控地址" >
        </div>
        <div class="input-group">
            <span class="input-group-addon">监控时间</span>
            <input type="text" name="monitor_time" class="form-control" placeholder="监控时间" >
        </div>
        <br>
{#        <div class="btn-group" >#}
            <button type="submit" class="btn btn-default">保存</button>
            <button onclick="javascript:document.location.reload()" type="button" class="btn btn-default">取消</button>
{#        </div>#}


    </form>
</div>

<script>
    function add_duan() {
        $("#add_duan_div").show();

    }
    function edit_duan(duan_id) {
        $("#add_duan_div").show();
        $("#add_div_id").val(duan_id);
    }

    function del_duan(duan_id) {
        if(confirm("确认要删除吗？")){
            $.get("/del_duan/" + duan_id + "/" ,{},function (ret) {
                document.location.reload()
            })
        }else {
            return
        }

    }
</script>
</body>
</html>
